<template>
  <div class="article" v-if="article">
    <div class="container py-5">
      <!-- 文章头部 -->
      <div class="row mb-5">
        <div class="col-lg-10 mx-auto">
          <article class="article-header">
            <!-- 分类标签 -->
            <div class="mb-3">
              <span :class="`badge ${getCategoryColor(article.category)} me-2`">
                {{ article.category }}
              </span>
              <span 
                v-for="tag in article.tags" 
                :key="tag"
                class="badge bg-light text-dark me-1"
              >
                #{{ tag }}
              </span>
            </div>
            
            <!-- 文章标题 -->
            <h1 class="display-5 fw-bold text-primary mb-4">
              {{ article.title }}
            </h1>
            
            <!-- 文章元信息 -->
            <div class="article-meta d-flex flex-wrap align-items-center mb-4">
              <div class="me-4 mb-2">
                <i class="bi bi-calendar text-muted me-2"></i>
                <span class="text-muted">{{ formatDate(article.date) }}</span>
              </div>
              <div class="me-4 mb-2">
                <i class="bi bi-eye text-muted me-2"></i>
                <span class="text-muted">{{ article.views }} 次阅读</span>
              </div>
              <div class="me-4 mb-2">
                <i class="bi bi-clock text-muted me-2"></i>
                <span class="text-muted">阅读时长约 {{ readingTime }} 分钟</span>
              </div>
              <div class="mb-2">
                <i class="bi bi-person text-muted me-2"></i>
                <span class="text-muted">作者</span>
              </div>
            </div>
            
            <!-- 文章封面 -->
            <div class="article-cover mb-5">
              <img 
                :src="article.image" 
                :alt="article.title"
                class="img-fluid rounded shadow-lg w-100"
                style="max-height: 400px; object-fit: cover;"
              >
            </div>
          </article>
        </div>
      </div>
      
      <div class="row">
        <!-- 文章内容 -->
        <div class="col-lg-8">
          <div class="article-content">
            <div class="card border-0 shadow-sm">
              <div class="card-body p-4 p-md-5">
                <!-- 文章摘要 -->
                <div class="alert alert-light mb-4">
                  <h6 class="fw-bold text-primary mb-2">
                    <i class="bi bi-lightbulb me-2"></i>文章摘要
                  </h6>
                  <p class="mb-0 text-muted">{{ article.excerpt }}</p>
                </div>
                
                <!-- 文章正文 -->
                <div class="article-body" v-html="article.content"></div>
                
                <!-- 文章底部信息 -->
                <div class="article-footer mt-5 pt-4 border-top">
                  <div class="row align-items-center">
                    <div class="col-md-6">
                      <p class="text-muted mb-2">如果觉得文章不错，请分享给更多朋友！</p>
                      <div class="share-buttons">
                        <button class="btn btn-outline-primary btn-sm me-2 mb-2">
                          <i class="bi bi-share me-1"></i>分享
                        </button>
                        <button 
                          class="btn btn-outline-danger btn-sm me-2 mb-2"
                          @click="toggleLike"
                          :class="{ 'btn-danger text-white': isLiked }"
                        >
                          <i class="bi bi-heart-fill me-1" v-if="isLiked"></i>
                          <i class="bi bi-heart me-1" v-else></i>
                          {{ isLiked ? '已点赞' : '点赞' }}
                          <span class="badge bg-light text-dark ms-1" v-if="article.likes">
                            {{ article.likes }}
                          </span>
                        </button>
                      </div>
                    </div>
                    <div class="col-md-6 text-md-end">
                      <small class="text-muted">
                        最后更新：{{ formatDate(article.updatedAt || article.date) }}
                      </small>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 相关文章 -->
            <div class="related-posts mt-5" v-if="relatedPosts.length > 0">
              <h4 class="mb-4">相关文章</h4>
              <div class="row g-3">
                <div class="col-md-6" v-for="post in relatedPosts" :key="post.id">
                  <div class="card border-0 shadow-sm h-100">
                    <div class="row g-0">
                      <div class="col-4">
                        <img 
                          :src="post.image" 
                          :alt="post.title"
                          class="img-fluid rounded-start h-100"
                          style="object-fit: cover;"
                        >
                      </div>
                      <div class="col-8">
                        <div class="card-body p-3">
                          <h6 class="card-title">
                            <router-link 
                              :to="`/article/${post.id}`" 
                              class="text-decoration-none"
                            >
                              {{ post.title }}
                            </router-link>
                          </h6>
                          <small class="text-muted">
                            <i class="bi bi-calendar me-1"></i>{{ formatDate(post.date) }}
                          </small>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 侧边栏 -->
        <div class="col-lg-4">
          <div class="sticky-top" style="top: 2rem;">
            <!-- 目录导航 -->
            <div class="card border-0 shadow-sm mb-4">
              <div class="card-header bg-primary text-white">
                <h6 class="mb-0">
                  <i class="bi bi-list-ul me-2"></i>文章目录
                </h6>
              </div>
              <div class="card-body">
                <nav class="toc">
                  <ul class="list-unstyled">
                    <li><a href="#section1" class="text-decoration-none">引言</a></li>
                    <li><a href="#section2" class="text-decoration-none">核心概念</a></li>
                    <li><a href="#section3" class="text-decoration-none">实践应用</a></li>
                    <li><a href="#section4" class="text-decoration-none">总结</a></li>
                  </ul>
                </nav>
              </div>
            </div>
            
            <!-- 作者信息 -->
            <div class="card border-0 shadow-sm mb-4">
              <div class="card-body text-center">
                <img 
                  :src="require('@/assets/head.jpg')" 
                  alt="作者头像" 
                  class="rounded-circle mb-3"
                  style="width: 80px; height: 80px; object-fit: cover;"
                >
                <h6 class="fw-bold">博主</h6>
                <p class="text-muted small mb-3">
                  热爱技术的全栈开发者
                </p>
                <div class="d-flex justify-content-center gap-2">
                  <router-link to="/about" class="btn btn-outline-primary btn-sm">
                    <i class="bi bi-person me-1"></i>关于我
                  </router-link>
                  <router-link to="/contact" class="btn btn-primary btn-sm">
                    <i class="bi bi-chat-dots me-1"></i>联系
                  </router-link>
                </div>
              </div>
            </div>
            
            <!-- 标签云 -->
            <div class="card border-0 shadow-sm">
              <div class="card-header bg-info text-white">
                <h6 class="mb-0">
                  <i class="bi bi-tags me-2"></i>标签云
                </h6>
              </div>
              <div class="card-body">
                <div class="tag-cloud">
                  <span 
                    v-for="tag in popularTags" 
                    :key="tag.name"
                    class="badge bg-light text-dark me-1 mb-2"
                    style="cursor: pointer;"
                    @click="searchByTag(tag.name)"
                  >
                    {{ tag.name }} ({{ tag.count }})
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 导航按钮 -->
      <div class="row mt-5">
        <div class="col-12">
          <div class="d-flex justify-content-between">
            <router-link to="/blog" class="btn btn-outline-primary">
              <i class="bi bi-arrow-left me-2"></i>返回文章列表
            </router-link>
            <div class="btn-group">
              <button class="btn btn-outline-secondary" title="上一篇" disabled>
                <i class="bi bi-chevron-left"></i>
              </button>
              <button class="btn btn-outline-secondary" title="下一篇">
                <i class="bi bi-chevron-right"></i>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 加载状态 -->
  <div v-else class="container py-5 text-center">
    <div class="spinner-border text-primary" role="status">
      <span class="visually-hidden">Loading...</span>
    </div>
    <p class="mt-3 text-muted">文章加载中...</p>
  </div>
</template>

<script>
export default {
  name: 'Article',
  data() {
    return {
      article: null,
      isLiked: false,
      relatedPosts: [],
      popularTags: [
        { name: 'Vue', count: 15 },
        { name: 'JavaScript', count: 12 },
        { name: '前端', count: 18 },
        { name: 'Node.js', count: 8 },
        { name: 'CSS', count: 10 },
        { name: '学习', count: 6 },
        { name: '项目', count: 9 }
      ]
    }
  },
  computed: {
    readingTime() {
      if (!this.article || !this.article.content) return 1
      const wordsPerMinute = 200
      const words = this.article.content.replace(/<[^>]*>/g, '').length
      return Math.ceil(words / wordsPerMinute) || 1
    }
  },
  async mounted() {
    await this.loadArticle()
    await this.loadRelatedPosts()
  },
  watch: {
    '$route.params.id': {
      immediate: true,
      handler() {
        if (this.$route.params.id) {
          this.loadArticle()
        }
      }
    }
  },
  methods: {
    async loadArticle() {
      const id = parseInt(this.$route.params.id)
      
      // 模拟API调用
      setTimeout(() => {
        this.article = {
          id: id,
          title: 'Vue 3 组合式API详解',
          excerpt: '深入了解Vue 3的组合式API，如何使用setup函数和响应式API来构建更好的Vue应用。本文将通过实例展示组合式API的强大功能和使用方法。',
          content: `
            <h2 id="section1">引言</h2>
            <p>Vue 3带来了许多激动人心的新特性，其中最重要的就是组合式API。这个新的API让我们能够更好地组织和复用代码逻辑，特别是在大型应用中。</p>
            
            <h2 id="section2">核心概念</h2>
            <p>组合式API的核心是<code>setup()</code>函数，它是一个新的组件选项。在setup函数中，我们可以使用各种响应式API来创建响应式状态、计算属性和监听器。</p>
            
            <h3>响应式引用</h3>
            <p>使用<code>ref()</code>可以创建响应式引用：</p>
            <pre><code>import { ref } from 'vue'

const count = ref(0)
console.log(count.value) // 0</code></pre>

            <h3>响应式对象</h3>
            <p>使用<code>reactive()</code>可以创建响应式对象：</p>
            <pre><code>import { reactive } from 'vue'

const state = reactive({
  count: 0,
  name: 'Vue'
})</code></pre>

            <h2 id="section3">实践应用</h2>
            <p>让我们通过一个简单的计数器例子来看看组合式API的使用：</p>
            <pre><code>&lt;template&gt;
  &lt;div&gt;
    &lt;p&gt;{{ count }}&lt;/p&gt;
    &lt;button @click="increment"&gt;+&lt;/button&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    
    const increment = () => {
      count.value++
    }
    
    return {
      count,
      increment
    }
  }
}
&lt;/script&gt;</code></pre>

            <h2 id="section4">总结</h2>
            <p>组合式API为Vue 3带来了更强大的功能组织能力，让我们能够更好地复用逻辑和管理复杂状态。通过学习和掌握这些新特性，我们可以构建更加健壮和可维护的Vue应用。</p>
          `,
          image: require('@/assets/background.jpg'),
          category: '技术分享',
          tags: ['Vue', 'JavaScript', '前端'],
          date: '2025-09-15',
          updatedAt: '2025-09-16',
          views: 1234,
          likes: 45
        }
      }, 500)
    },
    async loadRelatedPosts() {
      // 模拟加载相关文章
      setTimeout(() => {
        this.relatedPosts = [
          {
            id: 2,
            title: '现代前端开发工具链',
            image: require('@/assets/background.jpg'),
            date: '2025-09-18'
          },
          {
            id: 3,
            title: '响应式设计最佳实践',
            image: require('@/assets/background.jpg'),
            date: '2025-09-20'
          }
        ]
      }, 800)
    },
    toggleLike() {
      this.isLiked = !this.isLiked
      if (this.isLiked) {
        this.article.likes++
      } else {
        this.article.likes--
      }
    },
    searchByTag(tag) {
      this.$router.push(`/blog?tag=${tag}`)
    },
    getCategoryColor(category) {
      const colors = {
        '技术分享': 'bg-primary',
        '生活随笔': 'bg-success',
        '学习笔记': 'bg-warning',
        '项目经验': 'bg-info'
      }
      return colors[category] || 'bg-secondary'
    },
    formatDate(date) {
      return new Date(date).toLocaleDateString('zh-CN')
    }
  }
}
</script>

<style scoped>
.article-content {
  line-height: 1.8;
}

.article-content h2 {
  color: #0d6efd;
  margin: 2rem 0 1rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #e9ecef;
}

.article-content h3 {
  color: #495057;
  margin: 1.5rem 0 1rem 0;
}

.article-content pre {
  background: #f8f9fa;
  padding: 1rem;
  border-radius: 0.5rem;
  overflow-x: auto;
  border-left: 4px solid #0d6efd;
}

.article-content code {
  background: #f8f9fa;
  padding: 0.2rem 0.4rem;
  border-radius: 0.25rem;
  color: #d63384;
  font-size: 0.875em;
}

.article-content pre code {
  background: none;
  padding: 0;
  color: #495057;
}

.article-content p {
  margin-bottom: 1.2rem;
}

.article-content img {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.toc a {
  display: block;
  padding: 0.25rem 0.5rem;
  color: #6c757d;
  border-radius: 0.25rem;
  margin-bottom: 0.25rem;
}

.toc a:hover {
  background: #f8f9fa;
  color: #0d6efd;
}

.tag-cloud .badge:hover {
  background-color: #0d6efd !important;
  color: white !important;
  transform: scale(1.05);
  transition: all 0.2s ease;
}

.share-buttons .btn:hover {
  transform: translateY(-2px);
  transition: all 0.2s ease;
}

@media (max-width: 768px) {
  .sticky-top {
    position: static !important;
    margin-top: 2rem;
  }
}
</style>
